<script>
import axios from "axios";

export default {
    name: "MendianComponent",
    data(){
        return{
            //上架区域的字
            span:['帮我买','帮我取','帮我送'],
            spanColor:'black',
            CurrentIndex:-1,
            dialogVisible: false,
            dialogFormVisible: false,
            options: [{
                value: '选项1',
                label: '全部'
            }, {
                value: '选项2',
                label: '已取消'
            }, {
                value: '选项3',
                label: '待接单'
            }, {
                value: '选项4',
                label: '已接单配送中'
            }, {
                value: '选项5',
                label: '已完成'
            }],
            value: '',
            //搜索框数据对象
            searchContent:{
                pageNum: 1,
                pageSize: 10,
                orderType: 3,
                userPhone:"",
                shopName:"",
                status: 0,
                userName:"",
                startTime:'',
                endTime:'',
            },
            tableData:[],
            //对话框的数据模型
            form:{
                "shopId": 4244,
                "shopName": "11",
                "shopDescribe": "1111",
                "shopImage": "",
                "shopPhone": "11",
                "shopProvince": "北京",
                "shopCity": "北京市",
                "shopDistrict": "门头沟区",
                "shopAddress": "111",
                "shopLongitude": "39.940842",
                "shopLatitude": "116.101668",
                "shopStatus": 1,
                "addTime": "2024-07-17 19:17:37",
                "shopUserId": 0,
                "shopAccount": null,
                "shopPassword": null,
                "shopSort": null,
                "salesVolume": 0,
                "distance": null,
                "shopCommunitySort": null,
                "concernStatus": null,
                "shopOrderCount": 0,
                "shopCategoryList": null,
                "shopGoodsList": null,
                addressAll:[],
                address:[],
                location:'',
            },
            //分页查询
            currentPage: 1,//默认显示第一页
            pageSize:10,//默认每页显示10条
            totalNum: 0,    //总条数
            pageNum:0,  //查询页码 初始值为0
            totalpages:0 //总页数
        }
    },
    methods:{
        //搜索框点击发送请求函数
        searchClick(){
            this.axios.get(this.axios.defaults.baseURL + 'shop/querySearchShopList',
                {
                    params:{
                        //传输的参数
                        keyword:this.searchContent.keyword===undefined?'':this.searchContent.keyword,
                        phone:this.searchContent.phone===undefined?'':this.searchContent.phone,
                        pageNum:this.searchContent.pageNum===undefined?'':this.searchContent.pageNum,
                        pageSize:this.searchContent.pageSize===undefined?'':this.searchContent.pageSize,
                        startTime:this.searchContent.time[0]===undefined?'':this.formatDateTime(this.searchContent.time[0]),
                        endTime:this.searchContent.time[1]===undefined?'':this.formatDateTime(this.searchContent.time[1]),
                    }
                }
            ).then((res)=>{
                //处理响应数据
                console.log(res);
                //真正需要的数据
                console.log(res.data.data.list);
                //将得到的数据加载到tableData
                this.tableData=res.data.data.list;
            }).catch(err=>{})
        },
        //分页函数
        //点击按钮切换页面
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
            // console.log(this.currentPage);
        },
        getSeatchopList(){
                this.axios.get('deliveryOrder/queryDeliveryOrderList',
                    {
                        params:{
                            //传输的参数
                            pageNum: 1,
                            pageSize: 10,
                            orderType: 3,
                            userPhone:"",
                            shopName:"",
                            status: 0,
                            userName:"",
                            startTime:'',
                            endTime:'',
                        }
                    }
                ).then((res)=>{
                    //将得到的数据加载到tableData
                    this.tableData = this.tableData.concat(res.data.data.list);
                    this.totalpages = res.data.data.pages;
                    //页面加载时添加总数量
                    this.totalNum=res.data.data.total;
                }).catch(err=>{});
        },
    },
    created() {
        this.getSeatchopList();
        this.value=this.options[0].label
    }
}
</script>

<template>
    <div class="mendian">
        <div class="mendian-content">
            <ul class="sj cf">
                <li><router-link to="/help/dingdan">帮我买</router-link></li>
                <li>
                    <router-link to="/help/dingdan/qu">帮我取</router-link>
                </li>
                <li>
                    <router-link to="/help/dingdan/song">帮我送</router-link>
                </li>
            </ul>
            <!-- 搜索框 -->
            <div class="searchAndDate cf">
                <div class="search">
                    <span>用户手机号：</span>
                    <el-input v-model="searchContent.keyword"   class="searchInputSize"></el-input>
                </div>
                <div class="search">
                    <span>下单人姓名：</span>
                    <el-input v-model="searchContent.phone"  class="searchInputSize"></el-input>
                </div>
                <div class="search">
                    <span>状态：</span>
                    <el-select v-model="value">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :popper-append-to-body="false"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search">
                    <span>所属门店：</span>
                    <el-input v-model="searchContent.phone" class="searchInputSize"></el-input>
                </div>
                <div class="date">
                    <span>下单日期：</span>
                    <el-date-picker
                        v-model="searchContent.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="btn">
                    <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
                </div>

            </div>
            <!--  通过二级路由在这显示表格-->
            <div class="showTable">
                <router-view></router-view>
            </div>
        </div>

        <!--分页按钮-->
        <div class="block">
            <el-pagination
                background
                layout="prev, pager, next,jumper, ->, total"
                :total="this.totalNum"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                style="text-align: center">
            </el-pagination>
        </div>
    </div>
</template>

<style scoped>
.mendian{
    background-color: yellowgreen;
}
.mendian-content{
    padding: 20px;
}
.sj>li{
    float: left;
    margin-right: 20px;
}
.router-link{
    color: #000000;
}
a.router-link-active {
    color:#00FFFF;
}
.search{
    width: 320px;
    height: 36px;
    margin-right: 20px;
    margin-bottom: 10px;
    float: left;
}
.date{
    width: 430px;
    height: 36px;
    margin-right: 20px;
    margin-bottom: 10px;
    float: left;
}
.searchInputSize{
    box-sizing: border-box;
    width: 200px;
    height: 36px;
    padding: 0 15px;
}
.searchAndDate{
    margin-top: 30px;
}
</style>